<template>
  <div class="app-container">
    <!--==========================================================================================-->
    <el-form :model="formData" ref="formData" label-width="80px">
      <div class="box">
        <div class="box_content">
          <el-form-item label="学期">
            <el-select v-model="formData.SelectSemester" placeholder="全部">
              <el-option v-for="item in semester" :key="item.value" :label="item.label" :value="item.label"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="课程搜索">
            <el-select v-model="formData.SelectCourse" placeholder="全部">
              <el-option v-for="item in course" :key="item.value" :label="item.label" :value="item.label"></el-option>
            </el-select>
          </el-form-item>

        </div>
        <div class="box_content">
          <el-form-item label="副跟进人">
            <el-select v-model="formData.SelectTeacher" placeholder="全部">
              <el-option v-for="item in teacher" :key="item.value" :label="item.label" :value="item.label"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="搜索">
            <el-input placeholder="关键字搜索" v-model="formData.search" class="input-with-select">
              <el-select v-model="formData.type" slot="prepend" placeholder="请选择">
                <el-option label="学员状态" value="学员状态"></el-option>
                <el-option label="学生姓名" value="学生姓名"></el-option>
                <el-option label="以往就读学校" value="以往就读学校"></el-option>
                <el-option label="联系方式" value="联系方式"></el-option>
                <el-option label="主跟进人" value="主跟进人"></el-option>
                <el-option label="副跟进人" value="副跟进人"></el-option>
                <el-option label="来源途径" value="来源途径"></el-option>
              </el-select>
            </el-input>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="日期">
            <div class="block">
              <el-date-picker v-model="formData.time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </div>
          </el-form-item>
        </div>
        <div class="box_content">
          <div style="text-align: left;margin-bottom: 10px">
            <el-button type="primary" icon="el-icon-search">查询</el-button>
            <el-button icon="el-icon-search">重置</el-button>
          </div>
        </div>
      </div>
    </el-form>
    <!--==========================================================================================-->

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!--意向学员Tabs标签页-->
      <el-tab-pane label="意向学员" name="first">
        <NewStudentFile :getUserId="getUserId"></NewStudentFile>
        <div style="margin-top: 20px">
          <!--<el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>-->
          <el-button @click="toggleSelection()">取消选择</el-button>
          <el-button type="danger" @click="delChecked()">删除选中</el-button>
        </div>
        <el-table ref="tableData" :data="tableData" tooltip-effect="dark" style="width: 100%;" @select="onTableSelect" @selection-change="handleSelectionChange">
          <!--全选列-->
          <el-table-column type="selection" width="50px" v-model="selection"></el-table-column>
          <!--学生ID-->
          <el-table-column prop="unid" label="ID" width="150px"></el-table-column>
          <!--学员状态列-->
          <el-table-column label="跟进状态" width="150px">
            <template slot-scope="scope">
              <el-badge v-if="scope.row.follow_type==0" class="item">
                <el-button size="small">无状态</el-button>
              </el-badge>
              <el-badge :value="scope.row.follow.length" v-if="scope.row.follow_type==1" class="item">
                <el-button size="small">已跟进</el-button>
              </el-badge>
              <el-badge :value="scope.row.follow.length" v-if="scope.row.follow_type==2" class="item">
                <el-button size="small">未跟进</el-button>
              </el-badge>
              <el-badge :value="scope.row.follow.length" v-if="scope.row.follow_type==3" class="item">
                <el-button size="small">已注册</el-button>
              </el-badge>
              <el-badge :value="scope.row.follow.length" v-if="scope.row.follow_type==4" class="item">
                <el-button size="small">未缴费</el-button>
              </el-badge>
              <el-badge :value="scope.row.follow.length" v-if="scope.row.follow_type==5" class="item">
                <el-button size="small">未注册</el-button>
              </el-badge>
              <el-badge :value="scope.row.follow.length" v-if="scope.row.follow_type==6" class="item">
                <el-button size="small">欠费</el-button>
              </el-badge>
              <!--                <el-tag type="primary" v-if="scope.row.follow_type==2">未跟进</el-tag>
                              <el-tag type="success" v-if="scope.row.follow_type==1">已跟进</el-tag>
                              <el-tag type="primary" v-if="scope.row.follow_type==3">已注册</el-tag>
                              <el-tag type="primary" v-if="scope.row.follow_type==4">未缴费</el-tag>
                              <el-tag type="primary" v-if="scope.row.follow_type==5">未注册</el-tag>
                              <el-tag type="primary" v-if="scope.row.follow_type==6">欠费</el-tag>-->
            </template>
          </el-table-column>
          <!--学生姓名列-->
          <el-table-column prop="student_name" label="学生姓名" width="150px"></el-table-column>
          <!--性别列-->
          <el-table-column label="性别" width="150px">
            <template slot-scope="scope">
              <div v-if="scope.row.sex==1">男</div>
              <div v-if="scope.row.sex==2">女</div>
            </template>
          </el-table-column>
          <!--学校-->
          <!--<el-table-column label="以往就读学校" width="150px">
            <template slot-scope="{row}">
              <div>
                {{row.course.school}}
              </div>
            </template>
          </el-table-column>-->
          <el-table-column prop="course.school" label="曾读学校" :show-overflow-tooltip="true"></el-table-column>
          <!--地址列-->
          <el-table-column prop="address" label="地址" :show-overflow-tooltip="true"></el-table-column>
          <!--省-->
          <el-table-column prop="province" label="省" :show-overflow-tooltip="true"></el-table-column>
          <!--市-->
          <el-table-column prop="city" label="市" :show-overflow-tooltip="true"></el-table-column>
          <!--区-->
          <el-table-column prop="area" label="区" :show-overflow-tooltip="true"></el-table-column>
          <!--操作按钮列-->
          <el-table-column fixed="right" label="操作" width="275">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handleSelect(scope.$index, scope.row)">查看</el-button>
              <el-button size="mini" type="success" @click="handleFollow(scope.$index, scope.row)">跟进</el-button>
              <el-button size="mini" type="info" @click="handleSignUp(scope.$index, scope.row)">报名</el-button>
              <el-button size="mini" type="danger" @click.native.prevent="handleDelete(scope.$index, tableData)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <span class="demonstration"></span>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-tab-pane>
      <!--查看弹窗-->
      <el-dialog title="查看" :visible.sync="dialogVisible" width="80%">
        <div style="font-size: 20px">
          这是查看
          <SelectStudent :listData="formData"></SelectStudent>
          {{formData}}
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
      </el-dialog>
      <!--==========================================================================================-->
      <!--跟进-->
      <el-dialog title="跟进" :visible.sync="dialogVisible2" width="80%">
        <div style="font-size: 20px">
          <Follow :listData="formData"></Follow>
        </div>
        <!--<span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
        </span>-->
      </el-dialog>
      <!--==========================================================================================-->
      <!--报名-->
      <el-dialog title="报名" :visible.sync="dialogVisible3" width="80%">
        <div style="font-size: 20px">
          <SignUp :listData="formData"></SignUp>
        </div>
      </el-dialog>
      <!--==========================================================================================-->
      <!--==========================================================================================-->
      <!--==========================================================================================-->
      <!--==========================================================================================-->
      <!--正式学员Tabs标签页-->
      <el-tab-pane label="正式学员" name="second">
        <el-button class="btn">导入学生档案</el-button>
        <el-button class="btn">导出学员档案</el-button>
        <el-table ref="multipleTable" :data="tableData2" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
          <!--全选列-->
          <el-table-column type="selection" width="50px"></el-table-column>
          <!--学员状态列-->
          <el-table-column label="学员状态" width="160px">
            <!--根据state来判断显示状态-->
            <template slot-scope="scope">
              <el-tag type="primary" v-if="scope.row.state==0">已注册</el-tag>
              <el-tag type="warning" v-if="scope.row.state==1">待缴费</el-tag>
              <el-tag type="info" v-if="scope.row.state==2">未注册</el-tag>
              <el-tag type="danger" v-if="scope.row.state==3">欠费中</el-tag>
            </template>
          </el-table-column>
          <!--学生姓名列-->
          <el-table-column prop="name" label="学生姓名" :show-overflow-tooltip="true"></el-table-column>
          <!--性别列-->
          <el-table-column prop="sex" label="性别" :show-overflow-tooltip="true"></el-table-column>
          <!--以往就读学校列-->
          <el-table-column prop="school" label="以往就读学校" :show-overflow-tooltip="true"></el-table-column>
          <!--联系方式列-->
          <el-table-column prop="phone" label="联系方式" :show-overflow-tooltip="true"></el-table-column>
          <!--就读学期列-->
          <el-table-column prop="semester" label="就读学期" :show-overflow-tooltip="true"></el-table-column>
          <!--就读课程列-->
          <el-table-column prop="course" label="就读课程" :show-overflow-tooltip="true"></el-table-column>
          <!--主跟进人-->
          <el-table-column prop="teacher" label="主跟进人" :show-overflow-tooltip="true"></el-table-column>
          <!--副跟进人列-->
          <el-table-column prop="teacher2" label="副跟进人" :show-overflow-tooltip="true"></el-table-column>
          <!--来源途径-->
          <el-table-column prop="address" label="来源途径" :show-overflow-tooltip="true"></el-table-column>
          <!--操作按钮列-->
          <el-table-column align="center" label="操作" fixed="right" width="220">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handleSelect2(scope.$index, scope.row)">查看</el-button>
              <el-button size="mini" type="success" @click="handleFollow2(scope.$index, scope.row)">跟进</el-button>
              <!--<el-button size="mini" type="info" @click="handleSignUp(scope.$index, scope.row)"  v-if="scope.row.state==0" disabled>已报名</el-button>-->
              <!--<el-button size="mini" @click="handleSignUp(scope.$index, scope.row)"  v-if="scope.row.state==1" style="color: red">未缴费</el-button>-->
              <!--v-if="scope.row.state==2"-->
              <el-button size="mini" type="info" @click="handlePay(scope.$index, scope.row)">缴费</el-button>
              <!--<el-button size="mini" @click="handleSignUp(scope.$index, scope.row)"  v-if="scope.row.state==3" style="color: red">欠费中</el-button>-->
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <span class="demonstration"></span>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-tab-pane>
      <!--==========================================================================================-->
      <!--查看-->
      <el-dialog title="查看正式学员" :visible.sync="dialogVisible4" width="80%" append-to-body>
        <div style="font-size: 20px">
          <SelectStudent2 :listData="tableData2"></SelectStudent2>
        </div>
      </el-dialog>
      <!--跟进-->
      <el-dialog title="跟进正式学员" :visible.sync="dialogVisible5" width="80%" append-to-body>
        <div style="font-size: 20px">
          <Follow2></Follow2>
        </div>
      </el-dialog>
      <!--缴费-->
      <el-dialog title="缴费" :visible.sync="dialogVisible6" width="60%" append-to-body>
        <div style="font-size: 20px">
          <Pay></Pay>
        </div>
      </el-dialog>
    </el-tabs>
  </div>
</template>

<script>
  import NewStudentFile from './components/NewStudentFile.vue'
  import SelectStudent from './components/SelectStudent.vue'
  import Follow from './components/Follow.vue'
  import SignUp from './components/SignUp.vue'
  import SelectStudent2 from './components/SelectStudent2.vue'
  import Follow2 from './components/Follow2.vue'
  import Pay from './components/Pay.vue'
  import {
    addStudentRecruit,
    selectStudent,
    addStudentHome,
    addStudentCourse,
    addStudent,
    delStudent
  } from '@/api/studentRecruit.js'
  import { getSessionInfo, delSessionInfo } from '@/utils/auth'
  import store from '../../store'

  export default {
    name: 'index',
    components: {
      NewStudentFile,
      SelectStudent,
      Follow,
      SignUp,
      SelectStudent2,
      Follow2,
      Pay
    },
    data() {
      return {
        arr: [],
        selection: [],
        formData: {
          student_name: '',  //学生名字
          sex: null, //性别 1:男，2女
          address: '', //详细地址
          province: 0,  //省
          city: 0, //市
          area: 0, //区
          remark: '',  //备注
          card: '',  //身份证
          card_type: null, //证件类型 1身份证
          home: [{
            student_id: 2,  //学生unid
            phone: '', //电话
            parent_name: '', //家长姓名
            relation: null  //称谓 1:爸爸，2妈妈，3爷爷，4奶奶
          }],
          recruit: [{
            semester_id: '', //学期
            grade: null, //年级
            course_id: '', //课程
            teacher_id: null,  //主根进人id
            student_id: null,  //学生id
            deputy_teacher_id: null, //副跟进人
            school_id: null, //所属校区id
            way: null, //来源途径 1:口碑介绍，2电话邀约，3课程邀约，4广告宣传，5网络招生
            referrer: ''  //推荐人
          }],
          course: [{
            school: '',  //就读学校
            grade: null, //年级
            Chinese: null, //语文成绩
            Mathematics: null, //数学成绩
            English: null, //英语成绩
            Physics: null, //物理成绩
            Chemistry: null, //化学成绩
            Biology: null, //生物成绩
            History: null, //历史成绩
            Politics: null,  //政治成绩
            Geography: null //地理成绩
          }]
        },
        getUserId: store.getters.userId,
        tableData: [{
          unid: 0,
          follow_type: null,
          student_name: '',
          sex: null,
          address: null,
          province: null,
          city: null,
          area: null,
          is_official: null,
          remark: null,
          card: null,
          course: [{
            school: '1',  //就读学校
            grade: 1, //年级
            Chinese: 1, //语文成绩。
            Mathematics: 1, //数学成绩。
            English: 1, //英语成绩。
            Physics: 1, //物理成绩。
            Chemistry: 1, //化学成绩。
            Biology: 1, //生物成绩。
            History: 1, //历史成绩。
            Politics: 1,  //政治成绩。
            Geography: 1 //地理成绩。
          }]
        }],
        tableData2: [{
          state: '0',
          name: '小白',
          sex: '女',
          school: '一小',
          semester: '第二学期',
          course: '语文',
          phone: '123456789',
          teacher: '黄老师',
          teacher2: '蓝老师',
          address: '珠海'
        }],
        //教师
        teacher: [{
          value: '选项1',
          label: '张老师'
        }, {
          value: '选项2',
          label: '李老师'
        }, {
          value: '选项3',
          label: '黄老师'
        }],
        //课程
        course: [{
          value: '选项1',
          label: '语文'
        }, {
          value: '选项2',
          label: '英语'
        }, {
          value: '选项3',
          label: '数学'
        }],
        //学期
        semester: [{
          value: '选项1',
          label: '第一学期'
        }, {
          value: '选项2',
          label: '第二学期'
        }],
        /*弹出框属性*/
        dialogVisible: false,
        dialogVisible2: false,
        dialogVisible3: false,
        dialogVisible4: false,
        dialogVisible5: false,
        dialogVisible6: false,
        /*日期选择器*/
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        multipleSelection: [],
        activeName: 'first',
        value: '',
        SelectStudent: {
          arrayList: []
          /*address: '',
          name: '',
          phone: '',
          school: '',
          sex: '',
          state: '',
          teacher: '',
          teacher2: '',*/
        },
        page: 1,
        limit: 10,
        total: null,
        currentPage: 4
      }
    },
    methods: {
      async delChecked() {
        if (this.arr.length != 0) {
          for (let i = 0; i < this.arr.length; i++) {
            let delData = {
              unid: this.arr[i]
            }
            await delStudent(delData)
            let bb = await delStudent(delData)
          }
          this.$message.error('删除成功！  ')
        } else {
          this.$message.error('删除失败！  ')
        }
        /*row.splice(index,1)*/
      },
      /*getUserId(){
        console.log(store.getters.userId)
        return store.getters.userId
      },*/
      /*每页几条*/
      handleSizeChange(val) {
        this.limit = val
        this.queryStudent()
        console.log(`每页 ${val} 条`)
      },
      /*当前页*/
      handleCurrentChange(val) {
        this.page = val
        this.queryStudent()
        console.log(`当前页: ${val}`)
      },
      async addStudent() {
        let addData = {
          student_name: '11',  //学生名字
          sex: 1, //性别 1:男，2女
          address: '11', //详细地址
          province: 1,  //省
          city: 1, //市
          area: 1, //区
          remark: '1',  //备注
          card: '1',  //身份证
          card_type: 1, //证件类型 1身份证
          home: [{
            student_id: '',  //学生unid
            phone: '11', //电话
            parent_name: '11', //家长姓名
            relation: 1  //称谓 1:爸爸，2妈妈，3爷爷，4奶奶
          }],
          recruit: [{
            semester_id: '1', //学期
            grade: 1, //年级
            course_id: '1', //课程
            teacher_id: 1,  //主根进人id
            student_id: '',  //学生id
            deputy_teacher_id: 1, //副跟进人
            school_id: 1, //所属校区id
            way: 1, //来源途径 1:口碑介绍，2电话邀约，3课程邀约，4广告宣传，5网络招生
            referrer: '1'  //推荐人
          }],
          course: [{
            school: '1',  //就读学校
            grade: 1, //年级
            Chinese: 1, //语文成绩。
            Mathematics: 1, //数学成绩。
            English: 1, //英语成绩。
            Physics: 1, //物理成绩。
            Chemistry: 1, //化学成绩。
            Biology: 1, //生物成绩。
            History: 1, //历史成绩。
            Politics: 1,  //政治成绩。
            Geography: 1 //地理成绩。
          }]

        }
        let resData = await addStudent(addData)
        console.log(resData)
      },
      async queryStudent() {
        let queryData = {
          page: this.page,
          limit: this.limit
        }
        let resData = await selectStudent(queryData)
        // let resData = await get_InstitutionsList(queryData)
        console.log('查询结果：', resData)
        console.log('======================')
        console.log('======================')
        if (resData.code == 200) {
          this.tableData = resData.data.list
          console.log('成功')
        } else {
          console.log('失败')
        }
      },
      async queryStudent2() {
        let queryData = {}
        let resData = await selectStudent(queryData)
        // let resData = await get_InstitutionsList(queryData)
        console.log(resData.data.list)
        if (resData.code == 200) {
          this.total = resData.data.total
          this.currentPage = resData.data.totalPage
          console.log('成功')
        } else {
          console.log('失败')
        }
      },
      /*Tabs标签页*/
      handleClick(tab, event) {
        console.log(tab, event)
      },
      /*取消全选*/
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.tableData.toggleRowSelection(row)
          })
        } else {
          this.$refs.tableData.clearSelection()
          this.arr = []
        }
      },
      /*表格全选方法*/
      handleSelectionChange(val) {
        /*this.multipleSelection = val;*/
        console.log('22222222222222222')
        console.log(val)
        console.log('22222222222222222')
      },
      /*查看是否选中，选中时返回true*/
      onTableSelect(rows, row, index) {
        let selected = rows.length && rows.indexOf(row) !== -1
        console.log(selected)  // true就是选中，0或者false是取消选中
        this.arr.push(row.unid)
        console.log('===========arr===========')
        console.log(this.arr)
        console.log('===========arr===========')
        this.selection = selected
      },
      /*表格按钮方法*/
      /*查询*/
      handleSelect2(index, row) {
        this.dialogVisible4 = true
      },
      handleSelect(index, row) {
        this.dialogVisible = true
        console.log(index, row)
        this.formData = row
      },
      handlePay(index, row) {
        this.dialogVisible6 = true
      },
      /*跟进*/
      handleFollow(index, row) {
        console.log(index, row)
        this.formData = row
        this.dialogVisible2 = true
        this.tableData[index].state = 0
      },
      /*报名*/
      handleSignUp(index, row) {
        console.log(index, row)
        this.dialogVisible3 = true
        this.formData = row
        this.tableData[index].signState = 1
      },
      handleFollow2(index, row) {
        this.dialogVisible5 = true
      },
      /*删除*/
      async handleDelete(index, row) {
        let delData = {
          unid: row[index].unid
        }
        await delStudent(delData)
        let bb = await delStudent(delData)
        row.splice(index, 1)
        this.$message.error('删除成功！')
      }
      /*提交*/
      /*submitForm(formName) {
        /!*this.NewStudentFile = false*!/
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },*/
      /*重置*/
      /*resetForm(formName) {
        this.$refs[formName].resetFields();
      },*/
    }, mounted() {

      /*this.addStudent()*/
    }, created() {
      this.queryStudent()
      this.queryStudent2()
    }
  }
</script>

<style scoped>
  /*下拉框外层div*/
  /*.layout{
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
  }*/
  /*下拉框*/
  .select {
    flex-wrap: wrap;
  }

  .el-select .el-input {
    width: 130px;
  }

  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .box {
    width: 100%;
    display: flex;
    flex-direction: row;
    /*//两侧对齐*/
    justify-content: space-between;
    /*//自动换行*/
    flex-wrap: wrap;
    /*//清除上下行的中间空隙*/
    align-content: flex-start;
  }

  .box_content {
    flex: 30 200px;
  }

  /*//解决最后一行的问题*/
  .box:after {
    content: '';
    width: 30%;
  }

  .btn {
    margin-bottom: 15px;
  }

  .item {
    margin-top: 10px;
    margin-right: 40px;
  }
</style>
